<template>
	<div id="userDetFooter" class="footer">
		<div class="fourtune">
			<div class="fourleft">
				<a class="friend" :href="'sms:'+ phone">
					<img :src="constant.imgUrl +'center/icon_note.png'" alt>
					<p>短信</p>
				</a>
				<a class="friend" :href="'tel:'+phone">
					<img :src="constant.imgUrl +'design/telep.png'" alt>
					<p>拨号</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'userDetFooter',
	data() {
		return {
			consult: false,
			constant: this.$constant
		}
	},
	props: {
		phone: ''
	},
	mounted() {
	},
	methods: {}
}
</script>

<style lang="scss" scoped>
	.footer {
		.fourtune {
			display: flex;
			justify-content: flex-end;
			.fourleft {
				.friend {
					width: auto;
					display: flex;
					align-items: center;
					border-radius: 50px;
					padding: 6px 20px;
					border: 2px solid #ddd;
					margin-right: 20px;
					img {
						margin: 2px 10px 0 0;
					}
				}
			}
		}
		.fourtune {
			width: 100%;
			height: auto;
			float: left;
		}

		.fourleft {
			float: left;
			width: auto;
			height: auto;
			margin-top: 5px;
			margin-left: 30px;
		}

		.fourleft .friend:nth-child(2) {
			margin-left: 8px;
		}

		.fourtune .fourright .friend {
			width: 240px;
			height: 80px;
			float: left;
			margin-top: 12px;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
		}

		.fourtune .four_teli {
			background: #3a1b04;
			color: #ffd11a;
			border-radius: 40px 0 0 40px;
		}

		.fourtune .free_admis {
			background: #ffd11a;
			border-radius: 0 40px 40px 0;
		}
		.friend {
			width: 100px;
			height: auto;
			float: left;
			text-align: center;
			margin-top: 10px;
		}

		.friend img {
			float: left;
			width: 50px;
			height: 50px;
			margin-left: 25px;
		}

		.friend p {
			font-size:24px;
			clear: both;
			line-height: 1;
			text-align: center;
			color: #999999;
		}
	}
</style>

